<html>
  <head>
    <title></title>
    <style>
    
      @import url(../note.css);
      
      html { overflow:scroll-indicator; }
      
      input.search 
      {
        height:2em;
        border:1px solid #aaa;
        border-radius:1em;
        padding:0 2em 0 1em; 
        foreground-image:url(path:M35.525,31.228l-8.88-8.882c1.444-2.238,2.298-4.895,2.298-7.752c0-7.909-6.438-14.343-14.346-14.343
          c-7.911,0-14.343,6.434-14.343,14.343c0,7.911,6.433,14.344,14.343,14.344c2.856,0,5.513-0.849,7.752-2.294l8.88,8.88
          c0.295,0.297,0.782,0.297,1.076,0l3.22-3.221C35.824,32.008,35.824,31.523,35.525,31.228z M4.81,14.593
          c0-5.396,4.391-9.788,9.788-9.788c5.398,0,9.787,4.392,9.787,9.788c0,5.398-4.389,9.789-9.787,9.789
          C9.2,24.382,4.81,19.991,4.81,14.593z);
        foreground-repeat:no-repeat;
        foreground-size:1em;
        foreground-position-top:50%;
        foreground-position-right:0.6em;
        foreground-image-cursor: pointer;
        fill:#aaa; stroke:none; 
        aspect: IconClick;
      }
      input.search:focus,
      input.search:hover { fill:#07a; }
      
      section.images { flow:horizontal-wrap; }
      section.images > img { fill:#000; stroke:none; border:1px dashed #ccc; width:100dip; }
      section.images > img:hover { fill:#00d;  }
      
      
    </style>
    <script type="text/tiscript">
    
      function IconClick() {
        var onIcon;
        this.on("mousedown", function(evt) { onIcon = evt.isOnIcon; } );
        this.on("mouseup", function(evt) { if( onIcon && evt.isOnIcon) this.postEvent("icon-click"); } );
      }
      
      self.on("icon-click", "input.search", function() {
        view.msgbox(#information, "click on icon");
      });
    
    </script>
  </head>
<body>
 
  <h2>path:... (vector) lightweight images</h2>
    
  <p>Demo of path:... image used as background-image (that icon)</p>

  <input|text.search novalue="search">

  <p>Demo of path:... images as img src... </p>
  <section.images>
    <img src="path:M35.525,31.228l-8.88-8.882c1.444-2.238,2.298-4.895,2.298-7.752c0-7.909-6.438-14.343-14.346-14.343
        c-7.911,0-14.343,6.434-14.343,14.343c0,7.911,6.433,14.344,14.343,14.344c2.856,0,5.513-0.849,7.752-2.294l8.88,8.88
        c0.295,0.297,0.782,0.297,1.076,0l3.22-3.221C35.824,32.008,35.824,31.523,35.525,31.228z M4.81,14.593
        c0-5.396,4.391-9.788,9.788-9.788c5.398,0,9.787,4.392,9.787,9.788c0,5.398-4.389,9.789-9.787,9.789
        C9.2,24.382,4.81,19.991,4.81,14.593z"> 
        
    <img src="path:M0,0h313.263l171.79,171.789v138.105l-53.895-33.684v-47.158H256V53.895H53.895V512h161.685l-53.895,53.895H0V0z
        M309.895,70.737v104.421h104.421L309.895,70.737z M377.263,282.947c74.422,0,134.737,60.315,134.737,134.737
        c0,74.421-60.315,134.736-134.737,134.736c-24.986,0-48.395-6.803-68.447-18.657l-91.604,91.604
        c-10.521,10.526-27.586,10.526-38.105,0l-9.526-9.526c-10.526-10.526-10.526-27.578,0-38.105l91.605-91.604
        c-11.855-20.053-18.658-43.461-18.658-68.447C242.526,343.263,302.842,282.947,377.263,282.947z M377.263,336.842
        c-44.645,0-80.842,36.197-80.842,80.843c0,44.645,36.197,80.842,80.842,80.842c44.646,0,80.843-36.197,80.843-80.842
        C458.105,373.039,421.908,336.842,377.263,336.842z">
    
    <img src="path:M0 890.632q0 -46.872 33.201 -80.073l259.749 -259.749q-42.966 -82.026 -42.966 -175.77 0 -154.287 109.368 -264.632t265.608 -110.345 265.608 110.345 109.368 265.608 -109.368 264.632 -265.608 109.368q-93.744 0 -175.77 -42.966l-259.749 259.749q-33.201 33.201 -80.073 33.201 -44.919 0 -77.144 -32.224t-32.224 -77.144zm54.684 -.977q0 22.46 16.601 39.06t39.06 16.601 40.037 -17.577l251.937 -251.937q-44.919 -33.201 -78.12 -78.12l-251.937 251.937q-17.577 17.577 -17.577 40.037zm257.796 -514.615q0 128.898 91.791 220.689t220.689 91.791 220.689 -91.791 91.791 -220.689 -91.791 -220.689 -220.689 -91.791 -220.689 91.791 -91.791 220.689zm93.744 0q0 -89.838 64.449 -154.287t154.287 -64.449q15.624 0 15.624 15.624t-15.624 15.624q-78.12 0 -132.804 54.684t-54.684 132.804q0 15.624 -15.624 15.624t-15.624 -15.624z">
       
    <img src="path:c 50,0 50,100 100,100 c 50,0 50,-100 100,-100">
    
    <img src="path:M384 736c0-151.234 95.874-280.486 230.032-330.2 16.28-36.538 25.968-77.164 25.968-117.8 0-159.058 0-288-192-288s-192 128.942-192 288c0 99.060 57.502 198.104 128 237.832v52.78c-217.102 17.748-384 124.42-384 253.388h397.306c-8.664-30.53-13.306-62.732-13.306-96z
                   M736 448c-159.058 0-288 128.942-288 288s128.942 288 288 288c159.056 0 288-128.942 288-288s-128.942-288-288-288zM896 768h-128v128h-64v-128h-128v-64h128v-128h64v128h128v64z">
        
        
  </section>      
  
  <note><p>You can create such images in any SVG editor.</p>
    <p>Path image "url" is a content of attribute "d" of SVG's &lt;path&gt; element. So this SVG element:</p>   
    <pre>&lt;path d="c 50,0 50,100 100,100 50,0 50,-100 100,-100" /&gt;</pre>
    <p>in CSS will look as:</pre> 
    <pre> div { background-image:
                url(path:c 50,0 50,100 100,100 50,0 50,-100 100,-100); }</pre>
    <p>Note: content of "d" prepended by "path:"</p> 
  </note>

</body>
</html>
